<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  

</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-JavaScript-grammar" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/08/27/JavaScript-grammar/" class="article-date">
  <time datetime="2017-08-27T07:15:21.524Z" itemprop="datePublished">2017-08-27</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/08/27/JavaScript-grammar/">函数中call() apply() bind() 三种方法的区别和应用</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>每个函数都包含call() apply() bind()这三个方法。call()和apply()比较类似，<br>都是在特定作用于中调用函数，也就是设置函数体内this的指向。</p>
<h2 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h2><h3 id="apply"><a href="#apply" class="headerlink" title="apply()"></a>apply()</h3><p>apply()方法接收两个参数：1.在其中运行函数的作用域，也就是在那个作用域中运行函数就把那个作用域传进来。2.参数数组，可以使Array实例也可以是arguments对象</p>
<h2 id="例如："><a href="#例如：" class="headerlink" title="例如："></a>例如：</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">num1,num2</span>)</span>&#123;</div><div class="line">  <span class="keyword">return</span> num1+num2;</div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">callSum1</span>(<span class="params">num1,num2</span>)</span>&#123;</div><div class="line">  <span class="keyword">return</span> sum.apply(<span class="keyword">this</span>,<span class="built_in">arguments</span>);<span class="comment">//传入了arguments对象</span></div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">callSum2</span>(<span class="params">num1,num2</span>)</span>&#123;</div><div class="line">  <span class="keyword">return</span> sum.apply(<span class="keyword">this</span>,[sum1,sum2]);<span class="comment">//传入了Array的实例数组</span></div><div class="line">&#125; </div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(callSum1(<span class="number">10</span>,<span class="number">20</span>));<span class="comment">//结果为30</span></div><div class="line"><span class="built_in">console</span>.log(callSum2(<span class="number">20</span>,<span class="number">30</span>));<span class="comment">//结果为50</span></div></pre></td></tr></table></figure>
<hr>
<p>在上面的例子中callSum1()在执行sum()函数时传入了this作为this值(因为是在全局调用的，所以this值是window)和arguments对象。callSum2()也同样调用了sum()函数，但传入的是this和参数数组。在下面的运行过程中显示，callSum1()和callSum2()都正常运行并且返回正确的结果</p>
<h3 id="call"><a href="#call" class="headerlink" title="call()"></a>call()</h3><p>call()方法和apply()方法区别仅在于传入参数的方式不同，对于call()而言第一个是this和apply()是没有变化的，变化的是其余参数都直接传递给函数，也就是说使用call()方法时，所有的参数都必须逐个列举出来</p>
<h2 id="例如：-1"><a href="#例如：-1" class="headerlink" title="例如："></a>例如：</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">num1,num2,num3</span>)</span>&#123;</div><div class="line">  <span class="keyword">return</span> num1 + num2 + num3;</div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">callSum</span>(<span class="params">num1,num2,num3</span>)</span>&#123;</div><div class="line">  <span class="keyword">return</span> sum.call(<span class="keyword">this</span>,num1,num2,num3);<span class="comment">//参数必须逐个列举</span></div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(callSum(<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>));<span class="comment">//结果为60</span></div></pre></td></tr></table></figure>
<hr>
<p>在使用 call()方法的情况下，callSum()必须明确地传入每一个参数。结果与使用 apply()没有什么不同。至于是使用 apply()还是 call()，完全取决于你采取哪种给函数传递参数的方式方便。 如果你打算直接传入 arguments 对象，或者包含函数中先接收到的也是一个数组，那么使用 apply() 肯定更方便；否则，选择 call()可能更合适</p>
<h3 id="bind"><a href="#bind" class="headerlink" title="bind()"></a>bind()</h3><p>bind()方法与call()和apply()就有些区别了，后两者是调用函数，而前者是创建一个函数的实例，this值会被绑定到传给bind()方法的值</p>
<h2 id="例如：-2"><a href="#例如：-2" class="headerlink" title="例如："></a>例如：</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.color = <span class="string">"blue"</span>;</div><div class="line"><span class="keyword">var</span> o = &#123;</div><div class="line">  color:<span class="string">"red"</span>;</div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sayColor</span>(<span class="params"></span>)</span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.color);</div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> objectColor = sayColor.bind(o);</div><div class="line">objectColor();<span class="comment">//结果为red</span></div></pre></td></tr></table></figure>
<hr>
<p>在上面的例子中sayColor()调用了bind()并传入了o，创建了objectColor()函数。objectColor()函数中的this就是o,所以即使在全局作用域中调用也会打印red<br>bind()方法也是可以传参的,就是传参的方式有些特殊，有两个位置可以传<br>1.在调用bind()的同时以参数列表的形式进行传参<br>2.在调用的时候，以参数列表的形式进行传参<br>那到底以谁 bind 的时候传递的参数为准呢还是以调用的时候传递的参数为准<br>两者合并：调用bind() 的时候传递的参数和调用的时候传递的参数会合并到一起，传递到函数内部,但是调用bind()时传递的参数更优先</p>
<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><h3 id="借用构造函数"><a href="#借用构造函数" class="headerlink" title="借用构造函数"></a>借用构造函数</h3><p>以下只用call()方法来举例演示了，apply()方法只是第二个参数的形式不同而已</p>
<h2 id="例如：-3"><a href="#例如：-3" class="headerlink" title="例如："></a>例如：</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age,gender</span>)</span>&#123;<span class="comment">//创建一个构造函数</span></div><div class="line">    <span class="keyword">this</span>.name = name;</div><div class="line">    <span class="keyword">this</span>.age = age;</div><div class="line">    <span class="keyword">this</span>.gender = gender;</div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Student</span>(<span class="params">name,age,gender,id</span>)</span>&#123;</div><div class="line">  Person.call(<span class="keyword">this</span>,name,age,gender);</div><div class="line">  <span class="keyword">this</span>.id = id;</div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> student = <span class="keyword">new</span> Student(<span class="string">"张三"</span>,<span class="number">18</span>,<span class="string">"男"</span>,<span class="number">100000</span>);</div><div class="line"><span class="built_in">console</span>.log(student);<span class="comment">//结果为：Student &#123;name: "张三", age: 18, gender: "男", id: 100000&#125;</span></div></pre></td></tr></table></figure>
<hr>
<p>上面的例子中构造函数Person()拥有Student()一些共有的属性，所以可以利用call()方法来借用Person()函数中的所有属性</p>
<h3 id="扩充函数作用域"><a href="#扩充函数作用域" class="headerlink" title="扩充函数作用域"></a>扩充函数作用域</h3><p>事实上，传递参数并非 apply()和 call()真正的用武之地；它们真正强大的地方是能够扩充函数 赖以运行的作用域。下面来看一个例子。 </p>
<h2 id="例如：-4"><a href="#例如：-4" class="headerlink" title="例如："></a>例如：</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.color = <span class="string">"red"</span>;</div><div class="line"><span class="keyword">var</span> o = &#123;</div><div class="line">  color:<span class="string">"blue"</span></div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sayColor</span>(<span class="params"></span>)</span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.color);</div><div class="line">&#125;</div><div class="line"></div><div class="line">sayColor();<span class="comment">//red</span></div><div class="line">sayColor.call(<span class="keyword">this</span>);<span class="comment">//red</span></div><div class="line">sayColor.call(<span class="built_in">window</span>);<span class="comment">//red</span></div><div class="line">sayColor.call(o);<span class="comment">//blue</span></div></pre></td></tr></table></figure>
<hr>
<p>上面的例子中sayColor()是在全局作用域中定义的函数，而且在全局作用域中调用它时，它确实会打印red，因为对this.color的求值会转变成window.color的求值。而sayColor.call(this)和sayColor.call(window)是两种显示的在全局作用域中调用函数的方式，结果也会显示red。但是当运行sayColor.call(o)时，函数的执行环境就改变了，函数内部的this值就指向了o，于是this.color就变成了blue.使用 call()（或 apply()）来扩充作用域的大好处，就是对象不需要与方法有任何耦合关系。 </p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/08/27/JavaScript-grammar/" data-id="cj6uuys2z0000mgv3ygmgeh02" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/08/26/hello-world/" class="article-date">
  <time datetime="2017-08-26T02:33:54.428Z" itemprop="datePublished">2017-08-26</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2017/08/26/hello-world/">Hello World</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/08/26/hello-world/" data-id="cj6sp7at50000zgv3kzd1nh5k" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">August 2017</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2017/08/27/JavaScript-grammar/">函数中call() apply() bind() 三种方法的区别和应用</a>
          </li>
        
          <li>
            <a href="/2017/08/26/hello-world/">Hello World</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2017 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>